<template>
  <div id="app">
    <div class="title">
      <div class="title-1">客户经理报表</div>
      <div class="title-2">
        <div></div>
        <div class="title-3">截至日期：{{ time ? time : '' }}</div>
        <div></div>
      </div>
      <div class="zjy-search">
        <van-icon size="9vw" @click="drawer = true" name="search" />
      </div>
    </div>
    <el-drawer v-model="drawer" title="筛选条件" size="70%">
      <el-form :model="form" label-position="top">
        <el-form-item class="zjy-form-item" label="开始周">
          <el-select v-model="formValue.startWeek" placeholder="请选择开始周">
            <el-option
              v-for="item in startWeekSelectoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="zjy-form-item" label="结束周">
          <el-select v-model="formValue.endWeek" placeholder="请选择结束周">
            <el-option
              v-for="item in endWeekSelectoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="zjy-form-item">
          <el-button type="primary" @click="handleValidateClick">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-table
      class="table"
      empty-text="暂无数据"
      height="92vh"
      :data="data"
      style="width: 100%"
      stripe
      show-summary
      sum-text="合计"
    >
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.key"
        :label="item.title"
        :render-header="renderheader"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import {
  yb51Satement_managerSatementDept,
  yb51Satement_weeksList,
  yb51Satement_getWeekByDate
} from '@/request/api.js'

onMounted(() => {
  agentcode.value = route.query.agentcode
  role.value = route.query.role //role=1分公司督训    role=2中支督训
  getweeksList()
})

const agentcode = ref('')
const role = ref('')

const formValue = ref({
  startWeek: '',
  endWeek: ''
})

function handleValidateClick() {
  getmanagerSatement()
}
// 表头换行
function renderheader({ column, $index }) {
  return h('span', {}, [
    h('span', {}, column.label.split('|')[0]),
    h('br'),
    h('span', {}, column.label.split('|')[1])
  ])
}
const drawer = ref(false)
const time = ref('')
//获取客户经理报表（以机构为单位）
function getmanagerSatement(date) {
  if (formValue.value.endWeek == '') {
    alert('请选择结束周')
    return
  }
  showPageLoading()
  let formdata = new FormData()
  formdata.append('startWeek', formValue.value.startWeek)
  formdata.append('endWeek', formValue.value.endWeek)
  yb51Satement_managerSatementDept(formdata).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      console.log(r)
      data.value = r.data
      time.value = parseTime(new Date(), '{y}-{m}-{d}')
      drawer.value = false
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}

// branch:"清远"
// cooperation:0
// cooperationCount:0
// dailyTutor:0
// dailyturorCount:0
// largeOrder:0
// largeOrderCount:0
// managerCount:17
// outSideTraining:0
// outSideTrainingCount:0
// plan:0
// planCount:0
// preserve:0
// preserveCount:0
// salon:0
// salonCount:0
const columns = ref([
  {
    title: '中支',
    key: 'branch'
  },
  {
    title: '客户经理数',
    key: 'managerCount'
  },
  {
    title: '辅导人均',
    key: 'dailyTutor'
  },
  {
    title: '外训人均',
    key: 'outSideTraining'
  },
  {
    title: '维护人均',
    key: 'preserve'
  },
  {
    title: '微沙人均',
    key: 'salon'
  },
  {
    title: '大单人均',
    key: 'largeOrder'
  },
  {
    title: '经营人均',
    key: 'cooperation'
  },
  {
    title: '月计划人均',
    key: 'plan'
  }
])
const data = ref([])
let startWeekSelectoptions = ref([])
let endWeekSelectoptions = ref([])
watch(
  () => formValue.value.startWeek,
  (newVal, oldVal) => {
    console.log('7')
    if (newVal !== oldVal) {
      formValue.value.endWeek = ''
      console.log('8')
      let index = startWeekSelectoptions.value.findIndex((item) => item.value === newVal)
      endWeekSelectoptions.value = startWeekSelectoptions.value.slice(index)
    }
  }
)
//周数列表
function getweeksList() {
  console.log('1')
  let formdata = new FormData()
  yb51Satement_weeksList(formdata).then((r) => {
    if (r.status == 200) {
      startWeekSelectoptions.value = r.data.map((item) => {
        return {
          label: item,
          value: item
        }
      })
      console.log('2')
      getWeekByDate()
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}

//根据日期获取周数
function getWeekByDate() {
  let formdata = new FormData()
  formdata.append('date', dayjs(new Date()).format('YYYY-MM-DD'))
  yb51Satement_getWeekByDate(formdata).then((r) => {
    if (r.status == 200) {
      console.log('3')
      formValue.value.startWeek = r.data
      console.log('4')
      formValue.value.endWeek = r.data
      console.log('5')
      let index = startWeekSelectoptions.value.findIndex((item) => item.value === r.data)
      endWeekSelectoptions.value = startWeekSelectoptions.value.slice(index)
      getmanagerSatement()
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}
</script>
<style lang="less" scoped>
@import '@css/table.less';
</style>
